Перейти к основному содержимому

Редакторы кода с помощью javascript

· 2 мин. чтения

Очень часто в web-проектах надо использовать визуальный редактор кода (richtext code editor), похожий на существующие IDE, с номерами строк и подсветкой кода. Наиболее часто он используется в редактировании исходного кода статьи или шаблонов в админке. В этой статье я перечислю существующие скрипты по аналогии со списком WYSIWYG-редакторов.

Практически все существующие визуальные редакторы создают iframe и генерируют внутри страницу в соответсвии с данными javascript-объекта, занимающимся всеми задачами по генерации кода и обработке клавиш.

Основанные на iframe:

  • EditArea — наиболее популярный редактор благодаря табуляции, gzip, совместимость пространства имён с другими библиотеками

  • CodePress — парсит SQL, Perl, C#, XSL, ASP, VBscript. Отдельные движки для разных браузеров (gecko=firefox, ie, opera). Создаётся iframe со внутренним CodePress'объектом с обращением через contentWindow. Сразу внутри скрипта идёт поиск textarea-элементов по классу, так что с динамическими ajax-редакторами прийдётся изменять скрипт. Кроме того нумерация (до 1500) строк сделана при помощи одной картинки

  • CodeMirror — парсит JS, HTML, CSS

Напомню что iframe не соответсвует XHTML спецификации, а с использоватьпредложенный тэг object с не сильно получится, из-за ограничения надоступ внутренних dom-элементов (поправьте если я неправ).

Основанные на div'ах

  • Simple CodeArea 0.1b - очень простой но помоему самый логичный подход использовать подсветку синтаксиса благодаря полупрозрачной textarea и div-элементу с форматированным текстом под ней. Единственная проблема - запаздывание при скролле, но в будующем я думаю это перспективный продукт

  • MDK-editor — относительно навороченный редактор, есть контекстное меню. В минусы можно отнести некрасивый скин, небольшую тормознутость, неизвестную лицензию на использование, перезапись window.onload, размер кода свыше 100 кб. Достаточно много классов и обычных функций, просто так не разобраться, тем более без документации.

  • Helene — вместо iframe используется фоновый div и динамически позиционируемая textarea поверх. Поскольку изменяется только один ряд, то невозможно выделить нескольких строк сразу

  • 9ne — похож на консоль, но нет возможности выделения всей строки Shift+End. Эмулирует каретку мигающим div'ом.

Code highlighting​

Code - специальный тэг html, который часто связывают с тэгом pre что-бы показать исходный код. Некоторые ухищраются ещё и форматировать каждую строчку внутрь списка, что-бы получить номера строчек, но помоему это слишком.

Что-бы сделать подсветку кода цветом, можно воспользоваться отечественноым highlight.js , который правда у меня странно реагировал, вообще убирая код, кроме того он заточен и на pre тэг, любит когда указывается класс, согласно используемому языку.

Любители обработки кода до его показа - могут попробовать GeSHi

Читайте также